import React, { Component } from 'react';
import "../../styles/Index/Shopcart.scss"
import cdf from "../../img/cdf.jpg"
import shop from "../../img/shop.jpeg"

import { Checkbox, Space, Stepper } from 'antd-mobile'

import { MoreOutline } from 'antd-mobile-icons'
import { shopcart_list, shopcart_clear, shopcart_add, shopcart_sub } from '../../api/index'

class Shopcart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shoplist: [],
            num: 1,
        }
    }
    componentDidMount() {
        shopcart_list({ userid: localStorage.getItem('id') }).then(res => {
            // console.log(res);
            this.setState({
                shoplist: res.data.list
            })
        })
    }
    // 个人情况,受教育情况,工作经历+工作业绩,求职的岗位, 擅长的技术,抛出问题
    async onclear() {
        await shopcart_clear({ userid: localStorage.getItem('id') })
        this.componentDidMount()
    }
    sub(id){
        shopcart_sub({userid: localStorage.getItem('id'),goodid:id }).then(res=>{
            console.log(res);
            this.componentDidMount()
        })
    }
    add(id){
        shopcart_add({userid: localStorage.getItem('id'),goodid:id }).then(res=>{
            console.log(res);
            this.componentDidMount()
        })
    }
    render() {
        return (
            <div className='shopcart'>
                <div className="head">
                    <div className='header'>
                        <span>购物车</span>
                        <div className='you'><MoreOutline fontSize={38} /></div>
                    </div>
                    <div className='img'>
                        <img src={cdf} alt="" />
                        <span>cdf会员购</span>
                        <button onClick={() => { this.onclear() }}>清空购物车</button>
                    </div>

                </div>

                {
                    this.state.shoplist.map((item, index) => {
                        return (
                            <div className="main" key={index}>
                                <Checkbox />
                                <img src={item.pic} alt="" />
                                <div className="right">
                                    <p>{item.name}</p>
                                    <span>￥ {item.salesPrice.value}</span>
                                </div>
                                <div className="nums">
                                    <div onClick={()=>{this.sub(item.id)}} className="sub">-</div>
                                    <div className="num">{item.count}</div>
                                    <div onClick={()=>{this.add(item.id)}} className="add">+</div>
                                </div>
                            </div>
                        )
                    })
                }

                {
                    this.state.shoplist.length === 0 ?
                        <img className='imgshop' src={shop} alt="" /> :
                        <div className='foot'>
                            <Checkbox>全选</Checkbox>
                            <div className='zongjia'>总价: ￥273</div>
                            <div className="jiesuan">去结算</div>
                        </div>

                }

            </div>
        );
    }
}

export default Shopcart;